<template>
	<div class="details">
		<div class="list" v-for="(item,index) in list" :key="index">
			<div class="state">
			<image 
:src="state=='待付款'?'/static/images/daifuk.png':state=='买家已付款'?'/static/images/mjyfk.png':state=='待收货'?'/static/images/yfh.png':state=='交易成功'?'/static/images/cg.png':state=='交易关闭'?'/static/images/jygb.png':''" alt=""/>
			<div>{{state}}</div>
		</div>
		<div class="info">
			<div class="info_box">
				<div class="handle" v-if="state=='待付款'?false:true">
					<div class="handle_l">
						<image src="/static/images/wuliu.png" alt=""/>
						<div class="handle_c">
							<div class="handle_title">您的订单正在处理</div>
							<div class="handle_time">{{item.time}}</div>
						</div>
					</div>
					<image class="handle_r" src="/static/images/more.png" alt=""/>
				</div>
				<div class="my_info">
					<image class="my_l" src="/static/images/dizhi_o.png" alt=""/>
					<div class="my_r">
						<div class="self">
							<div class="name">{{item.name}}</div>
							<div class="tel">{{item.tel}}</div>
						</div>
						<div class="address">地址：{{item.address}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="content_info">
				<div class="content_l">
					<image src="/static/images/img.png" alt=""/>
					<div class="content_title">
						<div class="title_t">童装女童套装儿童春装2019新款品牌童装小女</div>
						<div class="title_b">规格规格</div>
					</div>
				</div>
				<div class="content_r">¥89.80</div>
			</div>
			<div class="change_total">
				<div class="change_info">
					 <div class="box" :style="id==1?'margin-left:20rpx':''" :key="id" @click="into(key.title)"
                          v-for="(key,id) in state=='待付款'?box:state=='买家已付款'?box_t:state=='待收货'?box_s:state=='交易成功'?box_f:state=='交易关闭'?box_l:''" >{{key.title}}</div>
				</div>
			</div>
			<div class="order_info">
				<div class="order_num">订单编号：{{item.order_num}}</div>
				<div class="order_time">下单时间：{{item.order_time}}</div>
				<div class="order_way">配送方式：{{item.way}}</div>
			</div>
		</div>
		<div class="order_box">
			<div class="shop_order">
				<div class="all_price">
					<div>商品总价</div>
					<div>¥{{item.all_price}}</div>
				</div>
				<div class="freight">
					<div>运费</div>
					<div>+¥{{item.freight}}</div>
				</div>
				<div class="conce">
					<div>优惠券</div>
					<div>-¥{{item.conce}}</div>
				</div>
			</div>
			<div class="sure_price">
				<div class="sure_title">实付款：<span>¥{{item.sure}}</span></div>
			</div>
		</div>
		<div class="contact">
			<div class="contact_box">
				<image src="/static/images/lxmj.png" alt=""/>
				<div>联系卖家</div>
			</div>
		</div>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rex:-1,
				nex:-1,
				state:'',
				box:[{title:'取消订单'},{title:'立即付款'}],
				box_t:[{title:'退款'}],
				box_s:[{title:'退换'}],
				box_f:[{title:'申请售后'}],
				box_l:[{}],
				list:[
					{time:'2019-05-01 14:44:27',name:'王先生',tel:'153****6248',address:'浙江省杭州市西湖区华星时代广场10楼A2102室',img:'/static/images/img.png',
					title:'丸美cc霜女补水保湿美白防晒隔离二合一遮瑕正品专',price:'89.80',cation:'60ml',order_num:'71854143640',order_time:'2019-05-01 11:36:08',
					way:'普通快递',all_price:'89.80',freight:'0.00',conce:'10.00',sure:'89.80'}
				]
			}
		},
		onLoad(options) {		
			switch (options.state) {
				case '等待买家付款':			
					this.state = '待付款'
					break;
				case '待发货':			
					this.state = '买家已付款'
					break;
				case '卖家已发货':			
					this.state = '待收货'
					break;
				case '交易成功':			
					this.state = '交易成功'
					break;
				case '交易关闭':			
					this.state = '交易关闭'
					break;				
				default:
					this.state = ''
					break;
			}
		},
		methods: {
			into(key){
				switch (key) {
					case '申请售后':
						wx.navigateTo({ 
							url: '/pages/refund/main'
						})
						break;
					case '退款':
						wx.navigateTo({ 
							url: '/pages/refund/main'
						})
						break;	
					default:
						break;
				}
		   }
		}
	}
</script>

<style scoped lang="less">
	.details{
		width: 100%;
		height: 100%;
		background: #f5f5f5;
		position: absolute;
		.list{
			width: 100%;
			height: 100%;
			.state{
			padding: 26rpx 0 30rpx 30rpx;
			display: flex;
			color: #333;
			font-size: 28rpx;
			background: #fff;
			width: 100%;
			image{
				width: 36rpx;
				height: 34rpx;
				margin-right: 18rpx;
			}
		}
		.info{
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			// margin-bottom: 30rpx;
			background: #fff;
			font-size:24rpx;
			color: #333;
			.info_box{
				width: 100%;
				padding: 28rpx 30rpx 28rpx  30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background:rgba(255,255,255,1);
				box-shadow:0px 4rpx 12rpx rgba(0,0,0,0.1);
				border-radius:20rpx;
				.handle{
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					margin-bottom: 26rpx;
					.handle_l{
						display: flex;
						image{
							width: 40rpx;
							height: 36rpx;
							margin-right: 20rpx;
						}
						.handle_c{
							display: flex;
							flex-direction: column;
							.handle_title{
								margin-bottom: 4rpx;
							}
						}
					}
					.handle_r{
						width: 14rpx;
						height: 26rpx;
						margin-top: 20rpx;
					}
				}
				.my_info{
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					.my_l{
						width: 40rpx;
						height: 36rpx;
						margin-right: 20rpx;
					}
					.my_r{
						display: flex;
						flex-direction: column;
						.self{
							display: flex;
							.name{
								margin-right: 2rpx;
							}
							
						}
						.address{
							// white-space: nowrap
						}
					}
				}
			}
		}
		.content{
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;
			background: #fff;
			font-size: 26rpx;
			color: #333;
			margin-bottom: 20rpx;
			.content_info{
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				.content_l{
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					image{
						width: 150rpx;
						height: 150rpx;
						margin-right: 20rpx;
					}
					.content_title{
						width: 346rpx;
						display: flex;
						flex-direction: column;
						.title_t{
							overflow:hidden;
							text-overflow: ellipsis;//显示省略号
							display:-webkit-box;
							-webkit-line-clamp:2;//块元素显示的文本行数
							-webkit-box-orient:vertical;
						}
						.title_b{
							font-size: 24rpx;
							color: #999;
							margin-top: 8rpx;
						}
					}
				}
			}
			.change_total{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 20rpx 0;
				box-sizing: border-box;
				.change_info{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.box{
						width:140rpx;
						height:60rpx;
						border:2rpx solid rgba(112,112,112,1);
						border-radius:30rpx;
						line-height: 60rpx;
						text-align: center;
						}
					}
				}
			.order_info{
				padding-bottom: 26rpx;
				box-sizing: border-box;
				width: 100%;
				.order_time{
					margin: 8rpx 0;
				}
			}
		}
		.order_box{
			width: 100%;
			background: #fff;
			font-size: 26rpx;
			color: #333;
			margin-bottom: 20rpx;
			.shop_order{
				width: 100%;
				height: 174rpx;
				padding: 26rpx 30rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #999;
				.all_price{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.freight{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 8rpx 0;
				}
				.conce{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
			.sure_price{
				width: 100%;
				height: 84rpx;
				padding: 12rpx 30rpx 0 0;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-end;
				.sure_title{
					color: #666;
					span{
						color: #333;
						font-size: 28rpx;
					}
				}
			}
		}
		.contact{
			width: 100%;
			height: 78rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #333;
			background: #fff;
			.contact_box{
				display: flex;
				align-items: center;
				color: #FF3D4FFF;
				image{
					width: 38rpx;
					height: 38rpx;
					margin-right: 18rpx;
				}
			}
		}
		}
		
	}
</style>
